import React,{useState,useEffect} from 'react'
import './index.css'
  
function BlurryLoading() {
    let [num,setNum] = useState(0);
    useEffect(()=>{
        const timer = setInterval(()=>{
            setNum(++num);
            if(num>99){
                clearInterval(timer);
            }
        },30)
    },[])
    
  return (
    <div className="img">
        <img src="https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80" 
        style={ {filter: `blur(${100 - num}px)`} } />
        <div className="dian" style={ {opacity: `${(100 - num)/100}` } }>{ num }%</div>
    </div>
  )
}

export default BlurryLoading